<template>
  <div id="service_class">
    <!-- 搜索框 -->
    <el-input
      v-model="search"
      placeholder="请输入关键字"
      clearable
      size="small"
      suffix-icon="el-icon-search"
      style="width: 250px"
      @keyup.enter.native="handleSearch"
    >
    </el-input>
    <!-- 内容 -->
    <div class="classify">
      <div class="items" v-for="item in getSearchData" :key="item.categoryId">
        <div class="title_box">
          <div style="font-weight: bold; margin-bottom: 3px">
            <strong :class="{ built_In: !item.isBulidIn }">{{
              item.categoryName
            }}</strong>
          </div>
          <!-- 分类名称下面的数字 -->
          <!-- <span style="font-size: 12px; color: #d4cfd6"
            >#{{ item.categoryId }}</span
          > -->
          <div class="custom" v-if="!item.isBulidIn">
            <!-- 添加二级服务分类 -->
            <svg-icon
              iconClass="icon-add"
              @click="
                addSecondLevelVisible = true;
                addSecondLevelForm.parentId = item.categoryId;
              "
            ></svg-icon>
            <svg-icon
              style="font-size: 15px; margin-left: 15px; color: #cdcdcd"
              iconClass="icon-trash"
              @click="delCategory(item.categoryId)"
            ></svg-icon>
          </div>
        </div>
        <div class="warps" v-if="item.children && item.children.length">
          <div
            class="item"
            v-for="ele in item.children"
            :key="ele.categoryId"
            :class="{ active: !item.isBulidIn }"
          >
            {{ ele.categoryName }}
            <span class="changeText">{{ ele.code }}</span>
            <div class="changeIcon" style="font-size: 12px">
              <svg-icon
                iconClass="icon-edit"
                style="color: #cbc9cd"
                @click="
                  editCategoryVisible = true;
                  editCategoryForm = { ...ele };
                "
              ></svg-icon>
              <svg-icon
                style="margin-left: 15px"
                iconClass="icon-error"
                @click="delCategory(ele.categoryId)"
              ></svg-icon>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加一级服务分类 -->
      <div
        class="items"
        style="border: 1px dashed #c7c8c9"
        @click="addFristLevelVisible = true"
      >
        <div
          class="title_box"
          style="border-bottom: 1px dashed #c7c8c9; font-weight: bold"
        >
          新建服务分类
        </div>
        <div
          class="warps"
          style="
            background-color: #f5f0f0;
            color: #3a84ff;
            font-size: 25px;
            display: flex;
            padding: 0;
            justify-content: center;
            align-items: center;
          "
        >
          +
        </div>
      </div>
    </div>

    <!-- 新增一级分类弹框 -->
    <el-dialog title="新增一级分类" :visible.sync="addFristLevelVisible">
      <el-form
        ref="addFristLevelForm"
        :model="addFristLevelForm"
        :rules="rules"
      >
        <el-form-item label="分组名称" prop="categoryName" label-width="100px">
          <el-input
            v-model="addFristLevelForm.categoryName"
            autocomplete="off"
            placeholder="请输入一级分类名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item class="tip" label="是否内置" prop="isBulidIn" label-width="100px">
          <el-radio v-model="addFristLevelForm.isBulidIn" label="1">是</el-radio>
          <el-radio v-model="addFristLevelForm.isBulidIn" label="0">否</el-radio>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCategory('addFristLevelForm')"
          >确定</el-button
        >
        <el-button @click="addFristLevelVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新增二级分类弹框 -->
    <el-dialog title="新增二级分类" :visible.sync="addSecondLevelVisible">
      <el-form
        ref="addSecondLevelForm"
        :model="addSecondLevelForm"
        :rules="rules"
      >
        <el-form-item label="分组名称" label-width="100px">
          <el-input
            v-model="addSecondLevelForm.categoryName"
            autocomplete="off"
            placeholder="请输入二级分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类编码" label-width="100px">
          <el-input
            v-model="addSecondLevelForm.code"
            autocomplete="off"
            placeholder="请输入分类编码"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否内置" prop="isBulidIn" label-width="100px">
          <el-radio v-model="addSecondLevelForm.isBulidIn" label="1">是</el-radio>
          <el-radio v-model="addSecondLevelForm.isBulidIn" label="0">否</el-radio>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCategory('addSecondLevelForm')"
          >确定</el-button
        >
        <el-button @click="addSecondLevelVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑服务分类弹框 -->
    <el-dialog title="编辑" :visible.sync="editCategoryVisible">
      <el-form ref="editCategoryForm" :model="editCategoryForm" :rules="rules">
        <el-form-item label="分类名称" prop="categoryName" label-width="100px">
          <el-input
            v-model="editCategoryForm.categoryName"
            autocomplete="off"
            placeholder="请输入二级分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类编码" prop="code" label-width="100px">
          <el-input
            v-model="editCategoryForm.code"
            autocomplete="off"
            placeholder="请输入二级分类编码"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否内置" prop="isBulidIn" label-width="100px">
          <el-radio v-model="editCategoryForm.isBulidIn" :label="1">是</el-radio>
          <el-radio v-model="editCategoryForm.isBulidIn" :label="0">否</el-radio>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCategoryVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCategory('editCategoryForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  serviceCategoryList_Api, //服务分类列表查询
  addServiceCategory_Api, //服务分类新增
  editServiceCategory_Api, //服务分类编辑
  delServiceCategory_Api, //服务分类删除
} from "@/api/configuration/business.js";
import {
  getCurrent_YMDHMS_Time, //获取当前年月日时分秒
} from "@/utils/common.js";
export default {
  data() {
    return {
      search: "", //搜索框
      data: [],
      addFristLevelVisible: false, //控制新增一级服务分类弹框显示隐藏
      addSecondLevelVisible: false, //控制新增二级服务分类弹框显示隐藏
      editCategoryVisible: false, //控制编辑服务分类弹框显示隐藏
      //一级表单
      addFristLevelForm: {
        categoryName: "", //分组名称
        isBulidIn: "0",
      },
      //二级表单
      addSecondLevelForm: {
        categoryName: "", //分组名称
        isBulidIn: "0", //是否内置
        parentId: "", //父级Id
        code: "", //分类编码
      },
      //编辑服务分类表单
      editCategoryForm: {
        categoryId: "", //分类id
        categoryName: "", //分组名称
        isBulidIn: "0", //是否内置
        parentId: "", //父级Id
        code: "", //分类编码
        updateTime: "", //编辑时间
      },
      //表单验证规则
      rules: {
        categoryName: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      parentId: "", //父级id
    };
  },
  methods: {
    //获取服务分类列表数据
    getData() {
      serviceCategoryList_Api().then((res) => {
        //先拿出一级分类
        this.data = res.rows.filter((item) => !item.parentId);
        //把对应的二级分类给一级分类的children
        this.data.forEach((ele) => {
          ele.children = [];
          res.rows.forEach((item) => {
            if (item.parentId && item.parentId == ele.categoryId) {
              ele.children.push(item);
            }
          });
        });
      });
    },
    //服务分类删除
    delCategory(id) {
      this.$confirm("是否确认删除该服务分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delServiceCategory_Api(id)
            .then((res) => {
              this.getData();
              this.$message.success("删除成功");
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //服务分类新增
    addCategory(formName) {
      //验证表单是否输入正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //正确
          this[formName].addTime = getCurrent_YMDHMS_Time(); //当前新增时间
          this[formName].isBulidIn = Number(this[formName].isBulidIn); //后端要求number类型
          addServiceCategory_Api(this[formName])
            .then((res) => {
              this.getData(); //重新获取数据
              this.addFristLevelVisible = false; //隐藏添加一级分类弹框
              this.addSecondLevelVisible = false; //隐藏添加二级分类弹框
              this.$message.success("添加成功");
              this.resetForm();
            })
            .catch((error) => {});
        } else {
          return false;
        }
      });
    },
    //服务分类编辑
    editCategory(formName) {
      //验证表单是否输入正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //正确
          this.editCategoryForm.updateTime = getCurrent_YMDHMS_Time(); //当前新增时间
          this.editCategoryForm.isBulidIn = Number(
            this.editCategoryForm.isBulidIn
          ); //后端要求number类型
          editServiceCategory_Api(this.editCategoryForm)
            .then((res) => {
              this.getData(); //重新获取数据
              this.editCategoryVisible = false; //隐藏编辑分类弹框
              this.$message.success("修改成功");
            })
            .catch((error) => {});
        } else {
          return false;
        }
      });
    },
    //搜索
    handleSearch() {
      console.log("搜索");
    },
    resetForm() {
      this.addFristLevelForm = {
        categoryName: "", //分组名称
        isBulidIn: "0",
      };
      this.addSecondLevelForm = {
        categoryName: "", //分组名称
        isBulidIn: "0", //是否内置
        parentId: "", //父级Id
        code: "", //分类编码
      };
    },
  },
  created() {
    this.getData();
  },
  computed: {
    getSearchData() {
      if (!this.search) {
        return this.data;
      } else {
        return this.data.filter((item) => {
          if (item.categoryName.includes(this.search)) {
            return true;
          } else {
            return item.children.some((ele) =>
              ele.categoryName.includes(this.search)
            );
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

#service_class {
  width: 100%;
  height: calc(100% - 40px);

  .classify {
    margin-top: 8px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    height: calc(100vh - 180px);
    overflow-y: scroll;

    .items {
      border-radius: 5px;
      height: 300px;
      flex: 0 0 calc(20% - 16px);
      margin-right: 20px;
      margin-bottom: 20px;
      border: 1px solid #e0e2e8;
      background-color: #ffffff;
      overflow: hidden;

      &:hover {
        box-shadow: 0px 0px 7px 1px #d4d1d1;

        .title_box .custom {
          visibility: visible;
        }
      }

      &:nth-child(5n) {
        margin-right: 0;
      }

      .title_box {
        height: 18%;
        border-bottom: 1px solid #e0e2e8;
        box-sizing: border-box;
        padding: 10px 15px;
        background-color: #fafbfd;
        position: relative;

        div {
          strong {
            position: relative;

            &.built_In {
              &::after {
                content: none;
              }
            }

            &::after {
              content: "内置";
              font-weight: normal;
              font-size: 10px;
              color: #ffffff;
              text-align: center;
              line-height: 17px;
              position: absolute;
              right: -40px;
              top: 3px;
              width: 30px;
              height: 16px;
              border-radius: 3px;
              background-color: #d3d5dd;
            }
          }
        }

        .custom {
          position: absolute;
          right: 20px;
          top: 18px;
          font-size: 10px;
          display: flex;
          align-items: center;
          visibility: hidden;
        }
      }

      .warps {
        width: 100%;
        height: 82%;
        box-sizing: border-box;
        padding: 10px 20px 10px 50px;
        color: #797b82;
        font-size: 14px;

        .item {
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          .changeIcon {
            display: none;
          }

          &.active:hover {
            color: #3a84ff;

            .changeText {
              display: none;
            }

            .changeIcon {
              display: block;
            }
          }

          &::before {
            content: "";
            position: absolute;
            left: -30px;
            bottom: 15px;
            width: 25px;
            height: 30px;
            border-left: 2px solid #ecedf1;
            border-bottom: 2px solid #ecedf1;
          }

          &:first-child::before {
            height: 25px;
          }

          span {
            font-size: 10px;
            color: #cbc9cd;
          }
        }
      }
    }

    @media screen and (min-width: 1920px) {
      .items {
        flex: 0 0 calc(16.6% - 16px);

        &:nth-child(5n) {
          margin-right: 20px;
        }

        &:nth-child(6n) {
          margin-right: 0;
        }
      }
    }
  }
}

::v-deep .tip .el-form-item__content {
  &::after {
    content: "内置一级分类不可编辑和删除";
    position: absolute;
    left: 0px;
    top: 25px;
    font-size: 10px;
    color: #3a84ff;
  }
}
</style>
